<template>
  <div class="wrapper">
    <div class="loginContainer">

      <!-- el-form start -->
      <el-form :model="form" :rules="loginRules" ref="ruleFormRef" label-width="auto" style="max-width: 600px">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="密码" prop="psd">
          <el-input v-model="form.psd" />
        </el-form-item>
        <el-form-item class="center-box">
          <el-button type="primary" @click="onSubmit(ruleFormRef)">登录</el-button>

          <el-button type="primary" @click="onReset(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- el-form end -->

    </div>
  </div>

</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue'
// 引入useRouter 自带hooks函数
import {useRouter} from 'vue-router'
import type { FormRules, FormInstance } from 'element-plus'

// router对象的创建
const router = useRouter()

// 引入登录接口请求方法
import {postLogin} from '../api/LoginApi'

// el-form的具体ref(标签引用)节点
const ruleFormRef = ref<FormInstance>()

// 对密码进行自定义规则校验
const validatePsd = (rule: any, value: any, callback: any) => {
  // 非空判断
  if (!value) {
    return callback(new Error('请输入密码!'))
  }
  // 正则校验
  if (/^\d{3,10}$/.test(value)) {
    callback()
  } else {
    callback(new Error('密码格式不符合要求!'))
  }
}

interface RuleForm {
  name: string
  psd: string
}

const form = reactive<RuleForm>({
  name: 'admin',
  psd: '123456'
})

const loginRules = reactive<FormRules<RuleForm>>({
  name: [
    /* 
    required:true; 代表必填项
    message:''  校验不通过信息
    trigger:'blur'   当前表单元素失焦时校验
    min 代表最少字符3个
    max 代表最多字符5个
    */
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 5, message: '用户名长度应该为3-5位', trigger: 'blur' },
  ],
  psd: [
    // 给密码设置自定义校验规则
    { validator: validatePsd, trigger: 'blur' },
  ],
})

// 表单提交事件
const onSubmit = (formEl: FormInstance | undefined) => {
  console.log(formEl)
  if(!formEl) {return }
  // 进行表单整体校验，需要用到formEl中的validate
  formEl.validate((valid) => {
    // valid是一个布尔值，如果当前表单中所有值都符合规则，那么返回true，只要有一个值不符合规则，那么就返回false
    console.log(valid)
    if (valid) {
      console.log('submit!')
      // 如果所有表单值都符合要求，就发起http登录请求
      postLogin({
        username: form.name,
        password: form.psd
      }).then(res=>{
        // 请求接口成功，响应值
        console.log(res)
        // 判断登录是否成功
        if(res.data.meta.status===200){
          // 将token存入sessionStorage
          sessionStorage.setItem('token',res.data.data.token)
          // 跳转到后台管理系统页面
          router.push('/home')
        }
      }).catch(()=>{
        console.log('服务器开小差了，请联系管理员!')
      })
    } else {
      console.log('error submit!')
    }
  })
}

// 表单重置事件
const onReset = (formEl: FormInstance | undefined) => {
  console.log(formEl)
  // 确定formEl存在，如果存在就重置表单
  formEl && formEl.resetFields()
}

</script>

<style>
.wrapper {
  width: 100%;
  height: 100%;
  background-color: lightyellow;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loginContainer {
  width: 600px;
  height: 400px;
  background-color: white;
  border: 1px solid gray;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-form {
  width: 400px;
}

.center-box {
  width: 150px;
  margin: 0 auto;
}
</style>